<template>
    <Card>
        <Form ref="searchData" :model="searchData" :rules="ruleInline" label-colon autocomplete="off" >
            <Row>
                <Col span="8">
                    <FormItem  prop="systemCode" label="系统选择" :label-width="100">
                        <Input v-model="searchData.systemCode" />
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem style="margin-left: 2em">
                        <Button type="primary" @click="queryData()"><Icon type="ios-search" />查询</Button>
                        <Button style="margin-left: 2em" type="primary" ghost @click="handleReset('searchData')"><Icon type="md-sync" />重置</Button>
                    </FormItem>
                </Col>
            </Row>
        </Form>
        <div style="margin-bottom: 1em">
            <Button type="info" style="margin-right: 1em" @click="handleEvent('add')"><Icon type="md-add" />新增</Button>
            <Button type="success" style="margin-right: 1em" @click="handleEvent('view')"><Icon type="ios-eye" />查看</Button>
            <Button type="warning" style="margin-right: 1em" @click="handleEvent('edit')"><Icon type="md-create" />修改</Button>
            <Button type="error" @click="handleEvent('delete')"><Icon type="ios-trash" />删除</Button>
        </div>
        <draggable v-model="resultData">



				<Table stripe row-key="id" highlight-row @on-current-change="currentChange" :columns="columns" :data="resultData" @on-row-dblclick="rowDblclick" ></Table>

        </draggable>
		<menu-detail :show-modal="showModal" :can-edit="canEdit" :main-data="modalData" :title="modalTitle"
                             @callbackByCancel="callbackByCancel" @callbackByOk="callbackByOk"/>
    </Card>
</template>
<script>
    import {search} from '@/api/menuApi'
    import OrganizationDataProvider from '@/views/group_management/data/OrganizationDataProvider'
    import MenuDetail from '@/views/settings/menu/components/menu-detail'
	import draggable from 'vuedraggable'
    export default {
        components: {
            MenuDetail,
			draggable
        },
        data () {
            return {
                showModal: false,
                canEdit: true,
                searchData:{
                    systemCode: 'share',
                },
                modalTitle: '添加系统菜单',
                modalData: OrganizationDataProvider.createOrganizationVo(),
                selectItem: null,
                ruleInline:{

                },
                columns: [
                    {
                        title: '菜单名称',
                        key: 'title',
                        tree: true,
                        display: 'inline-block'
                    }
                ],
                resultData: []
            }
        },
        mounted(){
            this.queryData()
        },
        methods: {
            handleReset (name) {
                this.$refs[name].resetFields();
            },
            queryData(){
              search(this.searchData.systemCode).then(res=>{
                this.resultData = res
              })
            },
            rowDblclick(rowData, index){
                this.selectItem = rowData
                this.handleEvent('view')
            },
            currentChange(currentRow){
                this.selectItem = currentRow
            },
            callbackByCancel () {
                this.showModal = false
            },
            callbackByOk(){
                this.showModal = false
                this.queryData()
            },
            handleEvent(event){
                if (event==='add'){
                    this.modalTitle = '添加系统菜单'
                    this.canEdit = true
                    this.modalData = OrganizationDataProvider.createOrganizationVo()
                    this.showModal = true
                }else{
                    if (this.selectItem===null){
                        this.$Message.error('请先选择数据，后操作！')
                        return
                    }
                    if (event ==='view'||event ==='edit'){
                        this.canEdit = event !== 'view'
                        this.modalTitle = '系统菜单'
                        this.modalData = this.selectItem
                        this.showModal = true
                    }
                    if (event ==='delete'){
                        let selectDataId = []
                        selectDataId.push(this.selectItem.comCode)
                        /*deleteData(selectDataId).then(res=>{
                            this.$Message.success('删除成功！')
                            this.queryData()
                        })*/
                    }
                }
            }
        }
    }
</script>
